import { Image, Switch, Button, Space, Popconfirm } from "antd";
// import "../../../mock/pro";
import { useEffect, useState } from "react";

import { proListAPi } from "../../../api/pro";

import Table from "../components/Table";

interface ProItemType {
  proname: string;
  proid: string;
  issale: number;
  img1: string;
  category: string;
  brand: string;
  [propName: string]: any;
}

// const dataSource = [];

const Index = () => {
  const [dataSource, setDataSource] = useState<ProItemType[]>([]);
  const [total, setTotal] = useState<number>(1);
  const [page, setPage] = useState(1);
  const [num, setNum] = useState(10);

  const remove = (id: string) => {
    console.log(id);
  };

  const columns = [
    {
      title: "产品名称",
      dataIndex: "proname",
      width: 170,
    },
    {
      title: "产品图片",
      dataIndex: "img1",
      // render属性表示渲染的内容
      // text表示对应的dataIndex的字段的内容
      render(text: string) {
        // return <span>{text}</span>;
        return <Image width={100} height={100} src={text} />;
      },
    },
    {
      title: "产品分类",
      dataIndex: "category",
    },
    {
      title: "产品品牌",
      dataIndex: "brand",
    },
    {
      title: "是否售卖",
      dataIndex: "issale",
      render(text: number) {
        return <Switch defaultChecked={text === 1} />;
      },
    },
    {
      title: "操作",
      // 第二个参数record表示的是整一条数据
      render(text: string, record: ProItemType) {
        return (
          <Space>
            <Button onClick={() => console.log(record)}>编辑</Button>
            <Popconfirm
              title="Delete the task"
              description="Are you sure to delete this task?"
              onConfirm={() => remove(record.proid)}
              okText="Yes"
              cancelText="No"
            >
              <Button danger type="primary">
                删除
              </Button>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  useEffect(() => {
    (async () => {
      const res: any = await proListAPi({ count: page, limitNum: num });
      setDataSource(res.data);
      setTotal(res.total);
    })();
  }, [page, num]);

  const pageChange = (page: number) => {
    console.log(page);
    setPage(page);
  };

  const sizeChange = (currnet: number, size: number) => {
    console.log(size);
    setNum(size);
  };

  return (
    <>
      <h2>产品列表页面</h2>
      <Table
        dataSource={dataSource}
        columns={columns}
        page={page}
        total={total}
        pageChange={pageChange}
        sizeChange={sizeChange}
      />
    </>
  );
};

export default Index;
